<template>
    <div>
        <div>请选择一位大神</div>
    </div>
    <div>
        <button
            v-for="(item, index) in names"
            v-bind:key="index"
            @click="selectNameFn(index)"
        >
            第{{ index }}位大神 : {{ item }}
        </button>
    </div>
    <div>你选择了【{{ selectName }}】大神</div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
    setup () {
        const data = reactive({
            names: ['张三', '李四', '王五'],
            selectName: '',
        });

        const selectNameFn = (index) => {
            data.selectName = data.names[index];
        };

        return {
            // data, // 在template 中使用还需要 data.xxx 使用, 比较麻烦, 用 toRefs(data), 在return 的时候用 延展运算符将变量暴露出去
            ...toRefs(data), selectNameFn,
        };
    },
};
</script>

<style>
</style>
